<template>
  <div>

    <!-- 阿里云视频播放器样式 -->
    <!-- 阿里云视频播放器脚本 -->

    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.19/aliplayer-min.js"></script>
    <!-- <script src="./CommentCoreLibrary.js"></script> -->
    <!-- 请下载之后使用 -->
    <!-- 阿里云视频播放器组件 -->
    <script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>

    <!-- <script type="text/javascript" charset="utf-8" src="../../api/aliplayercomponents-1.0.8.min.js"></script> -->


    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
  </div>
</template>

<script>
import vod from '@/api/vod'
export default {
    
    layout: 'video',//应用video布局
    asyncData({ params, error }) {
        return vod.getPlayAuth(params.vid).then(response => {
        console.log(response.data.data)
        return {
            vid: params.vid,
            playAuth: response.data.data
        }
        })
    },

/*     data() {
        return {
            vid:'',
            playAuth: ''
        }
    },

    created() {
        // this.init();
    },

    methods: {
        init(){
            this.getVideoAuth()
            console.log("vid--->",this.vid)
            console.log("playAuth--->",this.playAuth)
        },
        //获取播放凭证
        getVideoAuth(){
            this.vid = this.$route.params.vid;
            console.log(this.$route.params.vid)
            vod.getPlayAuth(this.$route.params.vid).then(response=>{
                console.log("-----------------getPlayAuth---------------------",response)
                this.playAuth=response.data.data
                console.log("playAuth--->",this.playAuth)
            })
        }
    }, */



   /**
     * 页面渲染完成时：此时js脚本已加载，Aliplayer已定义，可以使用
     * 如果在created生命周期函数中使用，Aliplayer is not defined错误
     */
    mounted() {
        var danmukuList = [{
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 2000,
                "size": 25,
                "color": 0xff0000
            }, {
                "mode": 1,
                "text": "test",
                "stime": 30000,
                "size": 25,
                "color": 0xff0000
            }, {
                "mode": 1,
                "text": "test",
                "stime": 4000,
                "size": 25,
                "color": 0x00c1de
            }, {
                "mode": 1,
                "text": "test",
                "stime": 5000,
                "size": 25,
                "color": 0x00c1de
            }, {
                "mode": 1,
                "text": "test",
                "stime": 10000,
                "size": 25,
                "color": 0x00c1de
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }, {
                "mode": 1,
                "text": "test",
                "stime": 1000,
                "size": 25,
                "color": 0xffffff
            }]

          var player = new Aliplayer({
            id: "J_prismPlayer",
            autoplay: false,
            width: "70%",
            height: "500px",
            // source:'https://outin-f6c8cb92a4d011ec901600163e1a65b6.oss-cn-shanghai.aliyuncs.com/sv/31ba6567-17fab407dd2/31ba6567-17fab407dd2.mp4?Expires=1647854141&OSSAccessKeyId=LTAI8bKSZ6dKjf44&Signature=V1A24H13Q9R1EPVBW1Us13Z6de8%3D',
            vid: this.vid,
            playauth: this.playAuth,
            cover: 'https://group4-edu.oss-cn-beijing.aliyuncs.com/edu-image/2022/03/18/8d013722-3ea6-4912-a32b-fc802c10fe1b.jpg',
            controlBarVisibility: 'click',    /* The mode of the status bar, which is set to Click. */
            showBarTime: '10000',             /* The time period that you must wait before the status bar is hidden, which is set to 10,000 milliseconds. */
            components: [{
                name: 'AliplayerDanmuComponent',
                type: AliPlayerComponent.AliplayerDanmuComponent,
                args: [danmukuList]
            },
           ] 
        },function (player) {
            console.log("The player is created");
        });
    }
}
</script>